<template>
  <div class="h-full">
    <div class="text-center text-2xl py-8 font-bold">
      涧河二社区中医舌诊仪
    </div>
    <div class=" flex items-center">

      <div class="w-1/6 flex items-center cursor-pointer" @click="changePatient">
        <img
          class="w-8 lg:w-12 xl:w-[3vw] ml-4 shrink-0 object-contain "
          src="/images/backIcon2.png"
          alt=""
        />
        <span
          class="shrink-0 ml-2 lg:text-3xl xl:text-[2vw] xl:ml-4 cursor-pointer"
          >切换检测人</span
        >
      </div>
      <div
        class="w-4/6 text-center text-2xl lg:text-[4vw] xl:text-[3vw] font-bold"
      >
      &nbsp;
      </div>
      <!-- <div
        class="w-4/6 text-center text-2xl lg:text-[4vw] xl:text-[3vw] font-bold"
      >
      中医舌诊仪
      </div> -->
      <div class="w-1/6 flex justify-end items-center mr-8">
        <div
          class="ml-4 xl:ml-8 shrink-0 py-2 px-4 flex justify-center items-center border border-solid border-current rounded-lg cursor-pointer"
          @click="refresh"
        >
          <img
            class="w-4 h-4 lg:w-6 lg:h-6 xl:w-8 xl:h-8 shrink-0 object-contain"
            src="/images/nav-reload.png"
            alt=""
          />
          <span class="text-xs xl:text-lg lg:text-base ml-2">刷新</span>
        </div>
      </div>
    </div>
    <div class="h-3/6 grid grid-cols-1 lg:grid-cols-2 place-items-center content-evenly">
      <div class="w-4/6 lg:w-5/6 place-self-center flex justify-center" v-for="item of Object.keys(itemImgList)" :key="item" >
        <img class="cursor-pointer" @click="openTask(item)" :src="`${baseUrl}/images/${itemImgList[item][activedItem[item]]}`" alt="" />
      </div>
      <div class="w-4/6 lg:w-5/6 place-self-center flex justify-center"  >
        <img class="cursor-pointer" @click="toReport" :src="`${baseUrl}/images/nav_report.png`" alt="" />
      </div>
    </div>
    <MyAlert ref="myAlert"></MyAlert>
  </div>
</template>

<script setup>
import MyAlert from "@/components/alert/index.vue";
import { ref, onMounted,onActivated } from "vue";
import {useRouter} from 'vue-router'
import {fetchTaskStat} from "@/assets/api/index.js"
const baseUrl = import.meta.env.BASE_URL

const router = useRouter()
const myAlert = ref();

const itemImgList = {
  // face: ["face.jpg", "faceOk.jpg"],
  tongue: ["she.jpg", "sheOk.jpg"],
  // report:["nav_report","nav_report.png"]
  // left_mai: ["left.jpg", "leftOk.jpg"],
  // right_mai: ["right.jpg", "rightOk.jpg"],
  // bingshi: ["bingshi.jpg", "bingshiOk.jpg"],
  // wenzhen_more: ["wen.jpg", "wenOk.jpg"],
};

const openTask = (item)=>{
  router.push(`/${item}`)
}

let activedItem = ref({
  tongue:0,
  face:0,
  left_mai:0,
  right_mai:0,
  bingshi:0,
  wenzhen_more:0
})

const changePatient = ()=>{
  // myAlert.value.showAlert("确认切换检测人?", true,()=>{
  //   window.localStorage.setItem('tongue_res','')
  //   router.push('/patient')
  // });
  window.localStorage.setItem('tongue_res','')
    router.push('/patient')
}
const toReport = ()=>{
  if(!activedItem.value.tongue){
    return myAlert.value.showAlert('舌象采集未完成')
  }
  window.localStorage.setItem('fromHistory','')
  let {origin,pathname} = window.location
  window.open(`${origin}${pathname}#/tongue_report`,'_blank')
  // router.push('/tongue_report')
}
const getTaskStat = async ()=>{
  let tongue_res = window.localStorage.getItem('tongue_res')
  let res = tongue_res && JSON.parse(tongue_res)
  //let res = await fetchTaskStat()
  if (!res || res.code !== '88') {
    //activedItem.value.tongue = 1
    return 
  }
  
  activedItem.value.tongue = 1
}

const refresh = ()=>{
  // getTaskStat()
  window.location.reload()
}

onMounted(() => {
  // myAlert.value.openAlert("一些提手", true);
  getTaskStat()
});

</script>

<style scoped></style>
